<template>
  <div class="set" :updateStatusData="updateStatusData">
    <header><HeaderPublc></HeaderPublc></header>
    <div class="container" :DetailData="DetailData">
      <div class="aside"  ><setPublc></setPublc></div>
      <div class="main " :class="{'table':shows}" id="main" style="">
        <div class="title" >
          <div class="left " style="width: 200px"><span class="el-icon-edit-outline "></span> {{title}}</div>
          <div class="right" style="text-align: right;border-bottom: 0px;">
            <el-button type="primary" size="small" class="sub" v-show="!shows" @click="statusCheck()"> 保存 </el-button>
            <el-button type="success" size="small" class="sub" v-show="shows" @click="statusCheck()"> 编辑 </el-button>
            <el-button   class="sub" size="small"  style="margin-right: 20px;" @click="goBack"> 返回 </el-button>
          </div>
          <div class="cleae" ></div>
        </div>
        <div v-show="!fromData.id" class="status" >
          <label>订单类型：</label>
          <el-select v-model="fromData.bizType" placeholder="请选择" popper-class="sle" style="background: #f8f5f5">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        </div>
        <div v-show="!shows && fromData.id" class="status" >
          <label>订单抓状态：</label>
          <el-select v-model="fromData.status" placeholder="请选择"  popper-class="sle" style="background: none">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 铁路运输--->
        <div class="tie" v-show="fromData.bizType==1">
          <!-- 铁路运输展示--->
          <table  width="100%" border="0" cellspacing="1" cellpadding="0" v-show="shows"> 
            <tr >
              <td width="100px;">订单号*：</td><td > {{fromData.number}}</td>
              <td width="100px;">订单类型：</td> <td >{{fromData.bizTypeText}}</td>
            </tr>
            <tr >
              <td width="100px;">发站代码*：</td><td > {{fromData.origin}} </td>
              <td width="100px;">货物重量：</td> <td >{{fromData.weight}}{{fromData.weight?'kg':''}} </td>
            </tr>
            <tr>
              <td width="100px;">到站代码*：</td><td >{{fromData.dest}}</td>
              <td width="100px;">货物体积：</td> <td >{{fromData.volume}} {{fromData.volume?'cbm':''}}</td>
            </tr>
            <tr>
              <td width="100px;">过境口岸：</td> <td >{{fromData.transitPort}}</td>
              <td width="100px;">公司名称*：</td> <td >{{fromData.customerName}}</td>
            </tr>
            <tr>
              <td width="100px;">车型*：</td><td >{{fromData.truckMode}}</td>
              <td width="100px;">姓名*：</td> <td >{{fromData.cttName}}</td>
            </tr>
            <tr>
              <td width="100px;">货品名*：</td><td >{{fromData.goodsName}}</td>
              <td width="100px;">联系方式*：</td> <td >{{fromData.cttPhone}}</td>
            </tr>
            <tr>
              <td width="100px;">箱型*：</td><td >{{fromData.cartonType}}</td>
              <td width="100px;">订单状态*：</td><td >{{fromData.statusText}}</td>
            </tr>
            <tr>
              <td width="100px;">箱量*：</td><td >{{fromData.cartonCount}} {{fromData.cartonCount?'TEU':''}}</td>
              <td width="100px;">创建时间：</td> <td >{{fromData.createTime}}</td>
            </tr>
          </table>
          <div class="sev" v-show="shows && fromData.id">
            <div  >
              <div v-show="fromData.bizType==1">
                <p width="100px;">贸易条款*：</p>
                <p style="padding-bottom: 10px">{{fromData.serviceTerm}}</p>
              </div>
               <div >
                 <p width="100px;">备注：</p>
                 <p >{{fromData.remark}}</p>
               </div>

            </div>
          </div>
          <!-- 铁路运输填写--->
          <table  width="100%" border="0" cellspacing="1" v-show="!shows" cellpadding="0" > 
            <tr >
              <td width="150px;">发站代码*</td><td > <input type="text" v-model="fromData.origin" ></td>
              <td width="150px;">货物重量</td > <td  class="dan"><input type="text" v-model="fromData.weight" @keyup="keyUp(fromData.weight,'weight')"><span>kg</span></td>
            </tr>
            <tr>
              <td width="150px;">到站代码*</td><td ><input type="text" v-model="fromData.dest"></td>
              <td width="150px;">货物体积</td> <td class="dan"><input type="text" v-model="fromData.volume" @keyup="keyUp(fromData.volume,'volume')"><span>cbm</span></td>
            </tr>
            <tr>
              <td width="150px;">过境口岸</td> <td ><input type="text" v-model="fromData.transitPort"></td>
              <td width="150px;">公司名称*</td><td ><input type="text" v-model="fromData.customerName"></td>
            </tr>
            <tr>
              <td width="150px;">车型</td> <td ><input type="text" v-model="fromData.truckMode" ></td>
              <td width="150px;">姓名*</td><td ><input type="text" v-model="fromData.cttName"></td>
            </tr>
            <tr>
              <td width="150px;">货品名*</td><td ><input type="text" v-model="fromData.goodsName"></td>
              <td width="150px;">联系方式*</td> <td ><input type="text" v-model="fromData.cttPhone" @keyup="keyUp(fromData.cttPhone,'cttPhone')"></td>
            </tr>
            <tr >
              <td width="150px;">箱型*</td> <td class="dan">
              <el-select v-model="fromData.cartonType" placeholder="请选择"  style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
              <td width="150px;">箱量*</td><td class="dan"><input type="text" v-model="fromData.cartonCount"  @keyup="keyUp(fromData.cartonCount,'cartonCount')"> <span>TEU</span></td>
            </tr>
            <tr>
              <td width="150px;">贸易条款</td> <td ><textarea  v-model="fromData.serviceTerm"/></td>
              <td width="150px;">备注</td> <td ><textarea  v-model="fromData.remark"/> </td>
            </tr>
          </table>
        </div>

        <!-- 海上运输--->
        <div v-show="fromData.bizType==2">
          <!-- 海上运输展示--->
          <table  width="100%" border="0" cellspacing="1" cellpadding="0" v-show="shows"> 
            <tr >
              <td width="100px;">订单号*:</td><td > {{fromData.number}}</td>
              <td width="100px;">订单类型</td> <td >{{fromData.bizTypeText}}</td>
            </tr>
            <tr >
              <td width="100px;">起运地*:</td><td > {{fromData.origin}}</td>
              <td width="100px;">重量:</td> <td >{{fromData.weight}} {{fromData.weight?'kg':''}}</td>
            </tr>
            <tr>
              <td width="100px;">起运港*:</td><td >{{fromData.dest}}</td>
              <td width="100px;">体积:</td> <td >{{fromData.volume}} {{fromData.volume?'cbm':''}}</td>
            </tr>
            <tr>
              <td width="100px;">公司名称*</td> <td >{{fromData.customerName}}</td>
              <td width="100px;">ETD/ETA*:</td><td >{{fromData.type}}</td>
            </tr>
            <tr>
              <td width="100px;">姓名*</td> <td >{{fromData.cttName}}</td>
              <td width="100px;">箱型*:</td><td >{{fromData.cartonType}}</td>

            </tr>
            <tr>
              <td width="100px;">联系方式*</td> <td >{{fromData.cttPhone}}</td>
              <td width="100px;">箱量*:</td><td >{{fromData.cartonCount}} {{fromData.cartonCount?'TEU':''}}</td>
            </tr>
            <tr>
              <td width="100px;">货值:</td> <td >{{fromData.cvalue}} {{fromData.cvalue?'元':''}}</td>
              <td width="100px;">品名*:</td><td >{{fromData.goodsName}}</td>
            </tr>
            <tr>
              <td width="100px;">订单状态*:</td><td >{{fromData.statusText}}</td>
              <td width="100px;">备注:</td> <td >{{fromData.remark}}</td>
            </tr>
            <tr>
              <td width="100px;">创建时间:</td> <td >{{fromData.createTime}}</td>
            </tr>
            <tr>

              <!--<td width="100px;">完成时间:</td> <td >{{fromData.type}}</td>-->
            </tr>
          </table>
          <!-- 海上运输填写--->
          <table  width="100%" border="0" cellspacing="1"  v-show="!shows" cellpadding="0" > 
            <tr >
              <td width="150px;">起运地/起运港*</td><td > <input type="text" v-model="fromData.origin" ></td>
              <td width="150px;">重量</td> <td class="dan"><input type="text" v-model="fromData.weight" @keyup="keyUp(fromData.weight,'weight')"><span>kg</span></td>
            </tr>
            <tr>
              <td width="150px;">目的地/目的港*</td><td ><input type="text" v-model="fromData.dest"></td>
              <td width="150px;">体积:</td> <td class="dan"><input type="text" v-model="fromData.volume" @keyup="keyUp(fromData.volume,'volume')"> <span>cbm</span></td>
            </tr>
            <tr>
              <td width="150px;">品名*</td><td ><input type="text" v-model="fromData.goodsName"></td>
              <td width="150px;">货值</td> <td class="dan"><input type="text" v-model="fromData.cvalue" @keyup="keyUp(fromData.cvalue,'cvalue')"> <span>元</span></td>
            </tr>
            <tr>
              <td width="150px;">公司名称*</td> <td ><input type="text" v-model="fromData.customerName"></td>
              <td width="150px;">ETD/ETA*</td><td ><input type="text" v-model="fromData.ETD"></td>
            </tr>
            <tr >
              <td width="150px;">姓名*</td> <td ><input type="text" v-model="fromData.cttName"></td>
              <td width="150px;">箱型*</td> <td class="dan">
              <el-select v-model="fromData.cartonType" placeholder="请选择箱型"  style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            </tr>
            <tr>
              <td width="150px;">联系方式*</td> <td ><input type="text" v-model="fromData.cttPhone" @keyup="keyUp(fromData.cttPhone,'cttPhone')"></td>
              <td width="150px;">箱量*</td> <td class="dan" ><input type="text" v-model="fromData.cartonCount" @keyup="keyUp(fromData.cartonCount,'cartonCount')"><span>TEU</span></td>
            </tr>
            <tr>
              <td width="150px;">备注</td> <td ><textarea type="text"  v-model="fromData.remark"/></td>
              <td width="150px;"></td> <td ></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .status{ font-size: 14px;text-align: left;padding: 20px}
  .set{width: 100%;height: 100%}
  .set header{width: 100%;height:60px}
  .set .container{width:  100%;height: 100%;background: #F8F5F5}
  .set .container .aside{width: auto;height: 100%;float: left;background: #545c64;margin-right: 20px;}
  textarea{width: 100%;background: none;border: 0px none;height: 40px}
  .sev{width: 50%;text-align: left;font-size: 12px;margin-left: 110px;border-top: 1px solid #e1e1e1;margin-top: 10px;padding-top: 10px}
  .sev p{line-height: 30px }
  footer{width: 100%;clear: both }
  .set .container .main{float: left;width:95% }
  .set .container .show .main{margin-left: 80px}
  body{background-color:#f7f7f7}
  table{border-right:1px solid #909090;border-bottom:1px solid #909090;margin-left: 20px;margin-right: 20px;width: 80%;margin: auto;margin-top: 40px}
  table  td{border-left:1px solid #909090;border-top:1px solid #909090;font-size: 12px;}
  .table table{border:0px none;}
  .table  table  td{border:0px none;text-align: left;line-height: 40px;}
  table td input{width: 100%;height: 40px;background: none;border: 0px none;text-indent: 10px}
  .table table td input{display:none}
  .table table td p{}
   table td p{display:none}
  .hello{padding: 20px;padding-top: 5px}
  .title{text-align: left;line-height: 50px;border-bottom: 1px solid #e1e1e1;margin-bottom: 10px; }
  .sub{cursor: pointer ;position: relative;top: -3px;}
  .set{margin-right: 10px;font-size: 24px;}
  .dan { text-align: left}
  .dan input{ width: 80%}
  .typeText{text-align: left; }
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herder.vue'
  import Public from '@/vuex/public'
  import cent from '@/components/public/Editor.vue'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-oderChart',
    created () {
      // 查看本页面路由 绑定对应页面class
      this.$store.commit('commitBizDetails', null)
      this.fromData.id = this.$route.query.id
      if(this.fromData.id){
        var parm = {
          id: this.fromData.id
        }
        this.showQuotationDetails(parm)
      }else {
        this.shows = false
        this.fromData.bizType = 1
      }
      this.type = this.$route.query.type
      var usr = sessionStorage.getItem('user');
      if(usr) {
        usr = JSON.parse(usr);
        if(usr.type == 0){
          // this.$router.push({ name: 'AdminConfig' })
        }
      }else {
        if(this.check != 'login'){
          // this.$router.push({ name: 'AdminConfig' })
        }
      }
    },
    data () {
      return {
        shows:true,
        type:null,
        fromData : {
          "id":null,//订单id
          "number":null,//订单编号
          "customerName":null,//客户名称
          "cttName":null,//联系人
          "cttPhone":null,//联系电话
          "bizType":null,//订单类型
           status:0,
          "origin":null,//起始的
          "dest":null,//目的地

          "truckMode":null,//车型
          "goodsName":null,//货物名称
          "cartonType":null,//箱型
          "cartonCount":null,//箱量
          "weight":null,//重量
          "volume":null,//体积
          "etad":null,//预计时间和到达时间
          "cvalue":null,// 货值
          "transitPort":null,//过境口岸
          "serviceTerm":null,//服务条款
          "csuserId":null,//客服状态
          "remark":null,//备注
          "createTime":null,
          ETD:''
        },
        remember: false, // 是否记住密码
        error: false, // 登陆是否成功
        defaultLayers: null,
        ui: null,
        list: [],
        bubble: null,
        routeInstructionsContainer: null,
        input: null,
        canCrop:false,
        /*测试上传图片的接口，返回结构为{url:''}*/
        uploadUrl: Public.api+'/portal/file/upload',
        content:'',
        title:'订单详情',
        options: [{
          value: 1,
          label: '铁路运输'
        }, {
          value: 2,
          label: '海上运输'
        }],
        options2: [{
          value: 0,
          label: '带分拨'
        }, {
          value: 1,
          label: '待处理'
        },{
          value: 2,
          label: '处理中'
        },{
          value: 3,
          label: '报价完成'
        },{
          value: 4,
          label: '已完成'
        }],
        options3: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],
      }
    },
    methods: {
      ...mapActions({
        showQuotationDetails:'showQuotationDetails',
        addQuotation:'addQuotation',
        updateQuotation:'updateQuotation'
      }),
      login () {
        this.$router.push({ name: 'map' })
      },
      goBack(){
        this.$router.back(-1)
      },
      statusCheck(){
        var ruleCode = this.rule()
        if(ruleCode){
          this.openError(ruleCode)
          return
        }
        this.shows = !this.shows
        if(this.shows){
          var parm = {
            "id":this.fromData.id,//订单id
            "customerName":this.fromData.customerName,//客户公司名称
            "cttName":this.fromData.cttName,//联系人
            "cttPhone":this.fromData.cttPhone,//联系电话
            "bizType":parseInt(this.fromData.bizType),//订单类型
            "origin":this.fromData.origin,//起始的
            "dest":this.fromData.dest,//目的地
            "truckMode":this.fromData.truckMode,//车型
            "goodsName":this.fromData.goodsName,//货物名称
            "cartonType":this.fromData.cartonType,//箱型
            "cartonCount":parseInt(this.fromData.cartonCount),//箱量
            "weight":parseInt(this.fromData.weight),//重量
            "volume":parseInt(this.fromData.volume),//体积
            "cvalue":parseInt(this.fromData.cvalue),// 货值
            "transitPort":this.fromData.transitPort,//过境口岸
            "serviceTerm":this.fromData.serviceTerm,//服务条款
            "remark":this.fromData.remark,//备注
            'status':this.fromData.status
          }
          if(this.fromData.id){
            this.updateQuotation(parm)
          }else {
            this.addQuotation(parm)
          }
        }

      },

      dataFn(res) {
        res = res.body.data;
        var time = Public.publicLo.timeCheng(),statusText;
          if(res.createTime){
            time = Public.publicLo.timeCheng(res.createTime)
          }
          switch (res.status){
            case 0:
              statusText='带分拨'
              break
            case 1:
              statusText='待处理'
              break
            case 2:
              statusText='处理中'
              break
            case 3:
              statusText='报价完成'
              break
            case 4:
              statusText='已完成'
              break
          }
        this.fromData = {
          "id":res.id,
          "number":res.number,
          "customerName":res.customerName,
          "cttName":res.cttName,
          "cttPhone":res.cttPhone,
          "bizType":res.bizType,
          bizTypeText: res.bizType==1?'铁路运输': '海上运输',
          "origin":res.origin,
          "dest":res.dest,
          "truckMode":res.truckMode,
          "goodsName":res.goodsName,
          "cartonType":res.cartonType,
          "cartonCount":res.cartonCount ,
          "weight":res.weight ,
          "volume":res.volume ,
          "etad":res.etad,
          "cvalue":res.cvalue ,
          "transitPort":res.transitPort,
          "serviceTerm":res.serviceTerm,
          "status":res.status,
          "csuserId":res.csuserId,
          "remark":res.remark,
          "creatorId":res.creatorId,
          "createTime":time.times,
          statusText:statusText
        }
      },
      // 操作是否成功
      listStatus (res) {
        if (res.status == 0) {
          // 修改成功
          var text = '询单提交成功';
          this.openSuccess(text);
          if(!this.fromData.id){
            this.fromData.id = res.data.id
          }else {

          }
          // 刷新列表
          var parm = {
            id: this.fromData.id
          }
          this.showQuotationDetails(parm)
        }
        if (res.status != 0) {
          // 修改 修改失败
          var text = '询单提交失败';
          this.openError(text)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },

      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },

      openError (text) {
        this.$message.error(text)
      },

      // 校验
      rule() {
        var ret = ''
        // 铁路运输的 的 表单验证验证
        if (this.fromData.bizType == 1) {
          if (!this.fromData.origin) {
            ret = '发站代码不能为空'
            return ret
          }
          if (!this.fromData.dest) {
            ret = '到站代码不能为空'
            return ret
          }
          if (!this.fromData.goodsName) {
            ret = '货品名不能为空'
            return ret
          }
        }
        // 海上运输的表单验证
        if (this.fromData.bizType == 2) {
          if (!this.fromData.origin) {
            ret = '起运地/起运港不能为空'
            return ret
          }
          if (!this.fromData.dest) {
            ret = '目的地/目的港不能为空'
            return ret
          }
          if (!this.fromData.goodsName) {
            ret = '品名不能为空'
            return ret
          }
        }
        // 通用验证
        if (!this.fromData.cartonType) {
          ret = '箱型不能为空'
          return ret
        }
        if (!this.fromData.cartonCount) {
          ret = '箱量不能为空'
          return ret
        }
        if (!this.fromData.customerName) {
          ret = '公司名称不能为空'
          return ret
        }
        if (!this.fromData.cttName) {
          ret = '姓名不能为空'
          return ret
        }
        if (!this.fromData.cttPhone) {
          ret = '联系方式不能为空'
          return ret
        }
      },
      keyUp(parm,status){
        parm = parm.replace(/[^0-9-]+/,'');
        if(status == 'cttPhone'){
          this.fromData.cttPhone = parm
        }
        if(status == 'weight'){
          this.fromData.weight = parm
        }
        if(status == 'volume'){
          this.fromData.volume = parm
        }
        if(status == 'cvalue'){
          this.fromData.cvalue = parm
        }
      }
      },
    computed: {
      DetailData() {
        var parm = this.Detail
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          if(parm== 'out'|| parm=='outErorr'){

          }else {
            this.listStatus(parm)
          }
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      var width = document.body.clientWidth;
      var dom = document.getElementById('main');
      var w = width-240;
      dom.style = 'max-width:'+ w +'px';
    },
    components: {
      HeaderPublc: HeaderPublc,
      cent: cent,
      setPublc:setPublc,
    }
  }
</script>

